<template>
   <!-- 雷达图组件 -->
   <!-- 必须给宽和高 -->
   <div ref="myDiv" class="radar-echart"></div>
</template>

<script>
// 完整的加载过程
// var echarts = require('echarts')

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入雷达图
require('echarts/lib/chart/radar')
// 引入提示框和标题组件
import { LegendComponent } from 'echarts/components'
echarts.use([LegendComponent])
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
   // 获取 div 的 dom 对象，页面渲染完毕后获取
   mounted() {
      // echarts 本身就有宽，根据页面设置下
      this.$refs.myDiv.style.width = this.$refs.myDiv.offsetWidth + 'px'
      this.$refs.myDiv.style.height =
         this.$refs.myDiv.offsetWidth + 2 / 3 + 'px'
      const myChart = echarts.init(this.$refs.myDiv)
      myChart.setOption({
         title: {
            text: '基础雷达图'
         },
         tooltip: {},
         legend: {
            data: [
               '预算分配（Allocated Budget）',
               '实际开销（Actual Spending）'
            ]
         },
         radar: {
            // shape: 'circle',
            name: {
               textStyle: {
                  color: '#fff',
                  backgroundColor: '#999',
                  borderRadius: 3,
                  padding: [3, 5]
               }
            },
            // 每个区域的最高值
            indicator: [
               { name: '工作效率', max: 100 },
               { name: '考勤', max: 100 },
               { name: '积极性', max: 100 },
               { name: '帮助同事', max: 100 },
               { name: '自主学习', max: 100 },
               { name: '正确率', max: 100 }
            ]
         },
         series: [
            {
               name: '预算 vs 开销（Budget vs spending）',
               type: 'radar',
               // areaStyle: {normal: {}},
               data: [
                  {
                     value: [30, 50, 10, 20, 100, 0],
                     name: '张三'
                  },
                  {
                     value: [50, 100, 50, 100, 100, 50],
                     name: '李四'
                  }
               ]
            }
         ]
      })
   }
}
</script>

<style>
.radar-echart {
   /* width: 300px;
   height: 300px; */
}
</style>
